<template>
    <div>
        <div class="login-container">
            <h2 class="login-title">LOGIN</h2>
            <el-form :model="form" :rules="rules" ref="regegisterForm" label-width="100px">
                <el-form-item label="USERNAME" prop="account" class="el-form-item__error">
                    <el-input v-model="form.account" class="input-field" placeholder="Enter Username"></el-input>
                </el-form-item>
                <el-form-item label="PASSWORD" prop="password" class="el-form-item__error">
                    <el-input type="password" v-model="form.password" class="input-field" placeholder="Enter Password"></el-input>
                </el-form-item>
                <el-form-item label="CONFIRM PASSWORD" prop="repassword" class="el-form-item__error">
                    <el-input type="password" v-model="form.repassword" class="input-field" placeholder="Password Again"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login-button" @click="register">Register</el-button>
                </el-form-item>
            </el-form>
            <div class="login-links">
                <router-link to="/login" class="login-link">Already have an account?Log in</router-link>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                account: "",
                password: "",
                repassword:"",
            },
            rules: {
                account: [
                    { required: true, message: "请输入用户名", trigger: ["change", "blur"] },
                    {
                        pattern: /[a-zA-Z]/,
                        message: "字母",
                        trigger: ["change", "blur"],
                    },
                ],
                password: {
                    required: true,
                    min:3,
                    message: "请输入至少3个字符的密码",
                    trigger: ["change", "blur"],
                },
                repassword:{
                    required: true,
                    min:3,
                    message: "请输入至少3个字符的密码",
                    trigger: ["change", "blur"],
                },
            },
        };
    },
    methods: {
        register() {

            this.$refs.regegisterForm.validate((valid) => {
                if (valid) {
                    const formData = {
                        username: this.form.account,
                        password: this.form.password,
                        repassword: this.form.repassword

                    };
                    if (this.form.password !== this.form.repassword) {
                        alert("两次密码不一致");
                    } else{
                        this.$axios
                            .post("api/register", formData)
                            .then((successResponse) => {
                                if (successResponse.data.code === 200) {
                                    console.log(successResponse.data);
                                    alert("成功注册")
                                    location.href="/login";
                                }
                                if (successResponse.data.code === 400) {
                                    console.log(successResponse.data);
                                    alert("注册失败")
                                    location.href="/register";
                                }
                            })
                            .catch((failResponse) => {

                                console.error();
                            });
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>

<style>
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 100px;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.login-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-field {
    border:0;
    margin-bottom: 15px;
    padding-right: 35px;
    padding-bottom:10px;
}
input.el-input__inner {
    margin-top: -5px;
    width: 195px;
    height:42px;
    outline: none;
    border:1px solid #2c3e50;
    background: transparent;
    border-radius: 45px;
}

.login-button {
    padding: 10px 25px;
    background:radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
    color: #000000;
    border: none;
    border-radius: 75px;
    cursor: pointer;
    font-size: 16px;
}

.login-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;

}

.login-link {
    font-weight: bold;
    font-size: 20px;
    color: #007bff;
    text-decoration: none;
    margin: 0 5px;
}

.el-form-item__error {
    font-weight: bold;
    margin-bottom: 2px;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
}
</style>
